<!--
 * @Author: cjh
 * @Date: 2022-03-20 21:24:33
 * @LastEditors: cjh
 * @LastEditTime: 2022-04-23 18:34:03
 * @Description: 
-->
<template>
  <section class="body_section">
    <div class="page">
      <ul class="circles">
        <li v-for="n in 10" :key="n"></li>
      </ul>
    </div>

    <div class="time page">
      {{ time }}
    </div>
  </section>
</template>

<script>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import dayjs from "dayjs";

export default {
  name: "Demo",
  props: {
    name: {
      type: String,
      default: "",
    },
  },
  setup(props, context) {
    console.log(props, context);
    let dialogVisible = ref(false);
    let msg = ref("hello World");
    // 时间
    let time = ref(dayjs().format("HH:mm:ss"));
    let timer = ref(null);
    let sectionDom = ref(null);

    const object = reactive({ name: "chijunhai", age: 22 });

    const refreshTime = () => {
      time.value = dayjs().format("HH:mm:ss");
    };

    onMounted(() => {
      timer = setInterval(() => {
        refreshTime();
      }, 1000);
    });

    onBeforeUnmount(() => {
      clearInterval(timer.value);
    });

    return {
      dialogVisible,
      msg,
      object,
      time,
      timer,
      refreshTime,
      sectionDom,
    };
  },
};
</script>
<style lang="scss" scope>
.body_section {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f0f2f5;

  .page {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}
.time {
  display: flex;
  align-items: center;
  font-size: 19em;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

// 背景
.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;

  li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: #fff;
    animation: animate 25s linear infinite;
    bottom: -200px;
    @keyframes animate {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
      }
      100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
      }
    }
    &:nth-child(1) {
      left: 15%;
      width: 80px;
      height: 80px;
      animation-delay: 0s;
    }
    &:nth-child(2) {
      left: 5%;
      width: 20px;
      height: 20px;
      animation-delay: 2s;
      animation-duration: 12s;
    }
    &:nth-child(3) {
      left: 70%;
      width: 20px;
      height: 20px;
      animation-delay: 4s;
    }
    &:nth-child(4) {
      left: 40%;
      width: 60px;
      height: 60px;
      animation-delay: 0s;
      animation-duration: 18s;
    }
    &:nth-child(5) {
      left: 65%;
      width: 20px;
      height: 20px;
      animation-delay: 0s;
    }
    &:nth-child(6) {
      left: 75%;
      width: 150px;
      height: 150px;
      animation-delay: 3s;
    }
    &:nth-child(7) {
      left: 35%;
      width: 200px;
      height: 200px;
      animation-delay: 7s;
    }
    &:nth-child(8) {
      left: 50%;
      width: 25px;
      height: 25px;
      animation-delay: 15s;
      animation-duration: 45s;
    }
    &:nth-child(9) {
      left: 20%;
      width: 15px;
      height: 15px;
      animation-delay: 2s;
      animation-duration: 35s;
    }
    &:nth-child(10) {
      left: 85%;
      width: 150px;
      height: 150px;
      animation-delay: 0s;
      animation-duration: 11s;
    }
  }
}
</style>
